<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的委派</title>
    <script>
     window.onload=function(){
         /*
         为每一个超链接绑定单击响应函数
          */
         var u1=document.getElementById("u1");
         var btn1=document.getElementById("btn1");
         btn1.onclick=function(){
             //创建一个li
             var li=document.createElement("li");
             li.innerHTML="<a href='javascript:;'>新建超链接</a>";
             //将li添加到ul中
             u1.appendChild(li);
         };
         /*事件的委派
          -将指定的事件统一绑定给元素的共同的祖先元素，从而通过祖先元素的响应函数来处理事件
          */
         u1.onclick=function (event){
             //alert("我是ul的单击响应函数");
         /*
           target
           -event中的target表示触发事件的对象
          */
             alert(event.target);
         }
     };
    </script>
</head>
<body>
<button id="btn1">添加超链接</button>
<ul id="u1">
    <li><a href="javascript:;">超链接1</a></li>
    <li><a href="javascript:;">超链接2</a></li>
    <li><a href="javascript:;">超链接3</a></li>
</ul>
</body>
</html>